@angular/flex-layout
Advanced tools
@angular/flex-layout is a powerful layout library for Angular that provides a sophisticated API using Flexbox CSS and mediaQuery. It allows developers to create responsive and adaptive layouts with ease.
Responsive Layouts
This feature allows you to create responsive layouts that adapt to different screen sizes. The example shows a row layout that changes to a column layout on extra-small screens.
<div fxLayout="row" fxLayout.xs="column">
<div fxFlex>Item 1</div>
<div fxFlex>Item 2</div>
<div fxFlex>Item 3</div>
</div>Grid Layouts
This feature allows you to create grid layouts with flexible spacing and alignment. The example shows a row layout with items taking 25%, 50%, and 25% of the available space, respectively.
<div fxLayout="row" fxLayoutGap="10px">
<div fxFlex="25">Item 1</div>
<div fxFlex="50">Item 2</div>
<div fxFlex="25">Item 3</div>
</div>Alignment and Justification
This feature allows you to align and justify content within a layout. The example shows a row layout with content centered both horizontally and vertically.
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex>Centered Item</div>
</div>Show/Hide Elements
This feature allows you to conditionally show or hide elements based on screen size. The example shows text that is hidden on screens larger than small.
<div fxShow fxHide.gt-sm>
This text is hidden on screens larger than small.
</div>ngx-flexible-layout is another Angular library that provides a flexible layout system using CSS Flexbox. It offers similar functionalities to @angular/flex-layout but with a different API and potentially fewer features.
)
Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery. This module provides Angular (v2.3.1 and higher) developers with component layout features using a custom Layout API, mediaQuery observables,and injected DOM flexbox-2016 css stylings.
The Layout engine intelligently automates the process of applying appropriate FlexBox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of Flexbox CSS.
The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.
While other Flexbox CSS libraries are implementations of:
Angular Flex Layout - in contrast - is a pure-Typescript UI Layout engine with an implementation that:
The latest release of Angular Flex-Layout can be installed from npm
npm install @angular/flex-layout
Playing with the latest changes from master is also possible
npm install https://github.com/angular/flex-layout-builds.git
Developers
Demos
Templates
License: MIT
The sources for this package are in the Flex-Layout repository.
Please file issues and pull requests against that repo.
FAQs
Angular Flex-Layout =======
We found that @angular/flex-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.